<!-- 仪表盘（DashBord chart） -->
<template>
    <div>
        <div :id="'chart-dashBoard-' + keyword"></div>
        <div style="margin-top: -5px;text-align: center;color: #CCCCCC;">
            <span v-if="data.length>0">{{data[0].terminal}}</span>
            <span v-else style="font-size: 12px;">{{noDataTxt}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                chart: null,
                data: []
            }
        },
        props: {
            keyword: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            param: {
                type: Object,
                default(){
                    return {};
                }
            },
            cols: {
                type: Object,
                required: true
            },
            colors: {
                type: Array,
                default(){
                    return ['#18B7D6', '#EFCF6E', '#E47668'];
                }
            },
            forceFit: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number,
                default: 120
            },
            width: {
                type: Number,
                default: 180
            },
            plotCfg: {
                type: Object,
                default(){
                    return {}
                }
            },
            noDataTxt: {
                type: String,
                default: '没有可展示的数据'
            }
        },
        methods: {
            shape(){
                let Shape = this.G2.Shape;
                // 自定义Shape 部分
                Shape.registShape('point', 'dashBoard', {
                    drawShape: function (cfg, group) {
                        let origin = cfg.origin._origin; // 原始数据
                        let point = cfg.points[0]; // 获取第一个标记点
                        point = this.parsePoint({ // 将标记点转换到画布坐标
                            x: point.x,
                            y: 1
                        });
                        let center = this.parsePoint({ // 获取极坐标系下画布中心点
                            x: 0,
                            y: 0
                        });
                        let r = 15;
                        let ra = 0.5 * r;
                        let X1 = center.x;
                        let Y1 = center.y;
                        let X2 = point.x;
                        let Y2 = point.y;
                        let B = 150 / 180;
                        let Xa, Xb, Xc, Ya, Yb, Yc; // 绘制小箭头需要的三个点
                        let shape;
                        if (Y1 == Y2) {
                            if (X1 > X2) {
                                Xa = X2 + Math.cos(B) * ra;
                                Ya = Y2 - Math.sin(B) * ra;
                                Xb = X2 + Math.cos(B) * ra;
                                Yb = Y2 + Math.sin(B) * ra;
                                Xc = X2 + 2 * ra;
                                Yc = Y2;
                            } else {
                                Xa = X2 - Math.cos(B) * ra;
                                Ya = Y2 - Math.sin(B) * ra;
                                Xb = X2 - Math.cos(B) * ra;
                                Yb = Y2 + Math.sin(B) * ra;
                                Xc = X2 - 2 * ra;
                                Yc = Y2;
                            }
                        } else if (Y1 > Y2) {
                            let A = Math.atan((X1 - X2) / (Y1 - Y2));
                            Xa = X2 + ra * Math.sin(A + B);
                            Ya = Y2 + ra * Math.cos(A + B);
                            Xb = X2 + ra * Math.sin(A - B);
                            Yb = Y2 + ra * Math.cos(A - B);
                            Xc = X2 + 2 * ra * Math.sin(A);
                            Yc = Y2 + 2 * ra * Math.cos(A);
                        } else {
                            if (X1 > X2) {
                                let A = Math.atan((Y2 - Y1) / (X1 - X2));
                                Xa = X2 + ra * Math.cos(A + B);
                                Ya = Y2 - ra * Math.sin(A + B);
                                Xb = X2 + ra * Math.cos(A - B);
                                Yb = Y2 - ra * Math.sin(A - B);
                                Xc = X2 + 2 * ra * Math.cos(A);
                                Yc = Y2 - 2 * ra * Math.sin(A);
                            } else {
                                let A = Math.atan((Y2 - Y1) / (X2 - X1));
                                Xa = X2 - ra * Math.cos(A - B);
                                Ya = Y2 - ra * Math.sin(A - B);
                                Xb = X2 - ra * Math.cos(A + B);
                                Yb = Y2 - ra * Math.sin(A + B);
                                Xc = X2 - 2 * ra * Math.cos(A);
                                Yc = Y2 - 2 * ra * Math.sin(A);
                            }
                        }
                        shape = group.addShape('circle', {  // 指针外圈
                            attrs: {
                                x: X2,
                                y: Y2,
                                r: r / 1.5,
                                fill: cfg.color
                            }
                        });
                        group.addShape('circle', {    // 指针内圈
                            attrs: {
                                x: X2,
                                y: Y2,
                                r: r / 3,
                                fill: 'white'
                            }
                        });
                        group.addShape('text', {    // 中间标题
                            attrs: {
                                x: X1,
                                y: Y1 + 5,
                                text: origin.title,
                                fontSize: 12,
                                fill: '#CCCCCC',
                                textAlign: 'center'
                            }
                        });
                        group.addShape('text', {    // 中间标题
                            attrs: {
                                x: X1,
                                y: Y1 - 10,
                                text: origin.value + ' ℃',
                                fontSize: 12,
                                fill: '#CCCCCC',
                                textAlign: 'center'
                            }
                        });
                        group.addShape('polygon', { // 指针箭头
                            attrs: {
                                points: [
                                    [Xa, Ya],
                                    [Xc, Yc],
                                    [Xb, Yb],
                                    [Xa, Ya]
                                ],
                                fill: cfg.color
                            }
                        });
                        return shape;
                    }
                });
            },
            create(){
                this.shape();

                this.chart = new this.G2.Chart({
                    id: 'chart-dashBoard-' + this.keyword,
                    forceFit: this.forceFit,
                    height: this.height,
                    width: this.width,
                    plotCfg: this.plotCfg
                });
                this.chart.source(this.data);
                this.chart.coord('gauge', {
                    startAngle: -9 / 8 * Math.PI,
                    endAngle: 1 / 8 * Math.PI
                });
                this.chart.col('value', this.cols);
                this.chart.axis('value', {
                    tickLine: {
                        stroke: '#EEEEEE'
                    },
                    labelOffset: -12
                });
                this.chart.point().position('value').shape('dashBoard').color('value', (v) => { // 根据值的大小确定标记的颜色
                    if (v < this.cols.max * 0.3) {
                        return this.colors[0];
                    } else if (v < this.cols.max * 0.6) {
                        return this.colors[1];
                    } else {
                        return this.colors[2];
                    }
                });
                this.chart.legend(false);
                this.draw();
            },
            draw(){
                let lineWidth = 16;
                this.chart.guide().clear();
                this.chart.guide().arc([0, 1], [100, 1], { // 底灰色
                    stroke: '#CCCCCC',
                    lineWidth: lineWidth
                });

                if (this.data.length > 0) {
                    let val = this.data[0].value;
                    let firstCfg = {
                        stroke: this.colors[0],
                        lineWidth: lineWidth
                    }, secondCfg = {
                        stroke: this.colors[1],
                        lineWidth: lineWidth
                    }, thirdCfg = {
                        stroke: this.colors[2],
                        lineWidth: lineWidth
                    };
                    // 0-33 档
                    val > 0 && val <= 33 && this.chart.guide().arc([0, 1], [val, 1], firstCfg);
                    // 33-66 档
                    val > 33 && val <= 66 && this.chart.guide().arc([33, 1], [val, 1], secondCfg)
                    && this.chart.guide().arc([0, 1], [33, 1], firstCfg);
                    // 66-100 档
                    val > 66 && this.chart.guide().arc([66, 1], [val, 1], thirdCfg)
                    && this.chart.guide().arc([0, 1], [33, 1], firstCfg)
                    && this.chart.guide().arc([0, 1], [66, 1], secondCfg);
                }
                this.chart.changeData(this.data);
            },
            render(){
                app.ajax.get(this.url, this.param, (res) => {
                    if (res.s === 0) {
                        this.data = res.data;

                        this.draw();
                    } else {
                        this.$Message.error('数据加载失败：' + res.msg);
                    }
                });
            }
        },
        mounted(){
            this.create();
        }
    }
</script>